<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
  #paper {
    position: relative;
    width: 600px;
    height: 400px;
  }
  </style>
</head>
<body>
  <div id="paper"></div>
  <script src="/js/d3.js"></script>
  <script src="/js/spritejs.js"></script>
  <script>

const paper = spritejs.Paper2D('#paper', 600, 600).setResolution(1200, 1200)

const layer = d3.select(paper).append('fglayer')

d3.json('/data/city.json', (err, data) => {

  const root = d3.hierarchy(data)
      .sum(function(d) { return 1 })
      .sort(function(a, b) { return b.value - a.value; });

  const pack = d3.pack()
            .size([ 1200, 1200 ])
            .padding(3)

  const nodes = pack(root)

  layer.append('label')
        .attr('pos', [1000, 50])
        .attr('name', 'region')
        .attr('font', '42px Arial')
        .attr('text', '中国')

  const s = layer.selectAll({label: s => s.name !== 'region'})
       .data(nodes.descendants())
       .enter()
       .append('label')
       .attr('anchor', 0.5)
       .attr('pos', d => {
          const x = Math.round(d.x),
                y = Math.round(d.y)

          return [x, y] 
       })
       .attr('size', d => {
          const r = Math.round(d.r)
          return [2 * r, 2 * r]
       })
       .attr('bgcolor', 'rgba(31, 119, 180, 0.4)')
       .attr('borderRadius', d => {
          return d.r
       })
       .attr('font', d => {
          return `${16 + Math.round(10 * Math.log2(d.value))}px Arial`
       })
       .attr('lineHeight', d => {
          return Math.round(2 * d.r)
       })
       .attr('textAlign', 'center')
       .attr('text', d => d.data.name)
       .on('mousemove', d => {
          d3.event.stopDispatch()
          
          const {offsetX, offsetY} = d3.event,
                r = Math.round(d.r)

          if(offsetX ** 2 + offsetY ** 2 < r ** 2) {
            //console.log(d.data.name)
            layer.selectAll({label: s => s.name === 'region'})
                .attr('text', d.data.name)
          }
       })
       .on('mouseenter', d => {
          d3.event.target.attr('border', [3, 'red'])
       })
       .on('mouseleave', d => {
          d3.event.target.attr('border', [0, 'transparent'])
       })
})



  </script>
</body>
</html>